@require "./common/variable"

input()
  font-size $_font-size
  font-family inherit
  border 1px solid $_border-color
  box-sizing border-box
  border-radius $_border-radius
  transition $_color-transition, $_border-color-transition, $_box-shadow-transition
  &::placeholder
    color $_input-placeholder-color
  &:hover
    border-color $_border-color-dark
  &:focus
    border-color $_color-primary
    box-shadow 0 0 0 2.2px $_input-wave
  &:focus, &:focus-visible
    outline none
  &[disabled]
    cursor not-allowed
    background-color $_input-disabled-bg-color
    border-color $_border-color

fix()
  position absolute
  top 0
  bottom 0
  display inline-flex
  align-items center
  color $_color-text-looming
  & > .tulp-input__password, & > .tulp-input__clear
    cursor pointer
    &:hover
      color $_border-color-dark
    &:active
      color $_color-text-minor

.tulp-input
  display inline-flex
  position relative
  box-sizing border-box
  &__control
    width 100%
    padding $_input-padding
    line-height $_input-line-height
    input()
  &.exist-suffix > &__control
    padding-right 28px
  &.exist-prefix > &__control
    padding-left 28px
  &__prefix
    left 8px
    fix()
  &__suffix
    right 8px
    fix()
  &__icon
    transition color 0.3s $_transition
.tulp-input-group-addon
  & > .tulp-input__control
    position relative

.tulp-input-group-addon--before
  .tulp-input__control
    border-top-left-radius 0
    border-bottom-left-radius 0

.tulp-input-group-addon--after
  .tulp-input__control
    border-top-right-radius 0
    border-bottom-right-radius 0

.tulp-input-addon 
  font-size $_font-size
  padding $_input-padding
  line-height $_input-line-height
  background-color $_input-disabled-bg-color
  &__before 
    border-top-left-radius $_border-radius
    border-bottom-left-radius $_border-radius
    border-left 1px solid $_border-color
    border-top 1px solid $_border-color
    border-bottom 1px solid $_border-color
  &__after 
    border-top-right-radius $_border-radius
    border-bottom-right-radius $_border-radius
    border-right 1px solid $_border-color
    border-top 1px solid $_border-color
    border-bottom 1px solid $_border-color

.tulp-textarea 
  &__control 
    min-height 30px
    padding $_textarea-padding
    line-height $_textarea-line-height
    resize vertical
    input()
  
.tulp-input-size
  &--big
    .tulp-input__control, .tulp-input-addon
      line-height 38px
  &--small
    .tulp-input__control, .tulp-input-addon
      line-height 30px